// 单证操作单元
<template>
<div class="single-item">

<div class="header">
    <h4 class="title">
        {{mod.label}}
    </h4>

    <div class="status">
        <l-status :type='singleStatus'></l-status>
    </div>
</div>

<div class="content">

    <!-- singleNumber -->
    <div class="single-number">
        <component :is="mod.component" v-model='singleNumber' :conf='mod.conf'></component>
    </div>

    <!-- button-group -->
    <div class="control">

        <div>

            <component 
            :is='btn.component' 
            :btn='btn' 
            :mod='mod' 
            :conf='btn.conf'
            :singleNumber='singleNumber' 
            :singleStatus='singleStatus' 
            v-for='(btn, key) of btnsConf'
            :key='key'>
            </component>
            
        </div>

    
    </div>
    
</div>


    
</div>
</template>

<script lang='ts'>
import {Component, Prop, Vue} from 'vue-property-decorator'
import status from '../status/index.vue'

//btn components
import btnDelete from '../btns/btn_delete.tsx'
import btnResetPrint from '../btns/btn_reset_print.tsx'
import btnPrint from '../btns/btn_print.tsx'
import btnRandomSingle from '../btns/btn_random_single.tsx'
import btnAllocation from '../btns/btn_allocation.tsx'
import btnIntimidate from '../btns/btn_intimidate.tsx'
import btnResetIntimidate from '../btns/btn_reset_intimidate.tsx'

@Component({
    
    components: {
        'l-status': status,
        'l-btn-delete': btnDelete,
        'l-btn-reset-print': btnResetPrint,
        'l-btn-random-single': btnRandomSingle,
        'l-btn-print': btnPrint,
        'l-btn-allocation': btnAllocation,
        'l-btn-intimidate': btnIntimidate,
        'l-btn-reset-intimidate': btnResetIntimidate,
    }
})
export default class singleItem extends Vue{
    name:string = 'single-item'

    @Prop()
    type:string
    
    @Prop()
    singleNumber

    @Prop()
    mod

    @Prop()
    btnsConf

    @Prop()
    singleStatus


    buildBtn (btn){
        let mod = this.mod;
        let singleNumber = this.singleNumber;
        let type = this.type;
        let status = this.singleStatus;
        let params = {
            status,
            type,
            singleNumber,
            mod,
            btn,
        };
        
        
        class btnComponent extends Vue{
            render (h){

                let icon = h('i', {
                    attrs: {
                        class: `icon iconfont ${btn.icon}` 
                    }
                })

                let disabled = typeof btn.disabled === 'function' ? btn.disabled(params) : btn.disabled;
                return h('Button', {

                    props:{
                        type: btn.type,
                        size: 'small',
                        disabled,
                    },
                    on: {
                        click (){
                            btn.fn({key:mod.key,singleNumber,mod, btn})
                        }
                    }
                    
                }, [btn.title, icon])
            }
        }

        return new btnComponent()
    }

}


</script>

<style scoped lang='scss'>

.single-item{

    margin-left:  -1 *(_intervals() - _rem(4px));
    padding: _intervals() _intervals() _intervals(2);
    border: _rem(2px) solid transparent;
    border-radius:  $border_radius;
    transition: all $transition_time;

    $controlSize: _rem(180px);
    
    &:hover{
        box-shadow:  $default_shadow;
        border-left-color: $main_color;
        
        .header .title{
            color: $main_color;
        }

        .control{
            flex: 0 $controlSize;
            width: $controlSize;
        }
    }
    
    
    .header{
        margin-bottom: _rem(10px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all $transition_time;

        .title{
            font-weight: 400;
            color: $font_secondary;
            line-height: _rem(24px);
        }
    }

    .content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }

    .single-number{
        flex: 1 1;
    }

    .control{
        overflow: hidden;
        flex: 0 0;
        width: 0;
        margin-left: _intervals(1);

        text-align: right;

        transition: $transition_time ;

        &>div{
            width: $controlSize;
        }

        .icon{
            font-size: $font_small;
        }
    }
    
}


</style>